<script setup>
import MaterialCard from "@/components/MaterialCard.vue";
</script>

<template>
  <article>
    <div class="card-group">
      <MaterialCard type="filled">
        <h1 class="headline-small">组员</h1>
        <ul>
          <li>聂宁：cold_nitrogen</li>
          <li>刘宇杰：fifth_light</li>
          <li>刘东：TofuPig</li>
        </ul>
      </MaterialCard>
      <MaterialCard type="filled">
        <h1 class="headline-small">致谢</h1>
        <p>感谢老师的无私指导</p>
      </MaterialCard>
      <MaterialCard type="filled">
        <h1 class="headline-small">使用到的库</h1>
        <ul id="library-list">
          <li>serde</li>
          <li>tarpc</li>
          <li>tokio</li>
          <li>futures</li>
          <li>rocket</li>
          <li>serde_json</li>
          <li>jwt</li>
          <li>hmac</li>
          <li>sha2</li>
          <li>rocket_db_pools</li>
          <li>rand</li>
          <li>chrono</li>
          <li>maxminddb</li>
          <li>rcgen</li>
          <li>rustls-pki-types</li>
          <li>rustls</li>
          <li>tarpc-rustls</li>
          <li>tokio-rustls</li>
          <li>x509-parser</li>
          <li>toml</li>
          <li>bytes</li>
          <li>pcap</li>
          <li>pcap-file</li>
          <li>clap</li>
          <li>clio</li>
          <li>windows</li>
          <li>bitflags</li>
          <li>lru</li>
          <li>rustls-pemfile</li>
          <li>async-trait</li>
        </ul>
      </MaterialCard>
    </div>
    <p>Copyright © 2024</p>
  </article>
</template>

<style scoped>
article {
  padding: 32px;
}

article>* {
  margin: 1rem 0;
}

.card h1 {
  margin-top: 0;
  margin-bottom: 16px;
}

.card-group {
  display: flex;
  flex-wrap: wrap;
}

.card-group>* {
  width: 360px;
  margin-right: 32px;
  margin-bottom: 32px;
}

#library-list {
  overflow-y: scroll;
  height: 96px;
}
</style>
